[V0_FILE]typescriptreact:file="components/Login.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MouseMoveEffect } from "./MouseMoveEffect" export function Login({ onLogin }: { onLogin: () => void }) { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Aquí iría la lógica de autenticación onLogin() } return (

SnowConnect

) } [V0_FILE]typescriptreact:file="components/Logo.tsx" 'use client' import { motion } from 'framer-motion' import { Snowflake } from 'lucide-react' import { Button } from "@/components/ui/button" export function Logo({ onComplete }: { onComplete: () => void }) { return (

SnowConnect

El mejor ride es acompañado

) } [V0_FILE]typescriptreact:file="components/LocationSelector.tsx" import { useState } from 'react' import { motion } from 'framer-motion' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { MapPin } from 'lucide-react' interface LocationSelectorProps { updateUserData: (data: { location: string }) => void onComplete: () => void } export function LocationSelector({ updateUserData, onComplete }: LocationSelectorProps) { const [location, setLocation] = useState('') const handleManualLocation = () => { updateUserData({ location }) onComplete() } const handleGeolocation = () => { // Simular geolocalización setTimeout(() => { updateUserData({ location: 'Cerro Catedral' }) onComplete() }, 2000) } return (

Centro de esquí setLocation(e.target.value)} placeholder="Ingresa el nombre del centro" className="mt-1" />

) } [V0_FILE]typescriptreact:file="components/GroupChat.tsx" 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Users, Send, Plus } from 'lucide-react' interface GroupChatProps { groupName: string members: Array<{ id: number name: string status: 'online' | 'offline' }> } export function GroupChat({ groupName, members }: GroupChatProps) { const [message, setMessage] = useState('') const [messages, setMessages] = useState>([]) const sendMessage = () => { if (message.trim()) { setMessages(prev => [...prev, { id: Date.now(), sender: 'Tú', text: message, timestamp: new Date().toLocaleTimeString() }]) setMessage('') } } return (

{groupName}

{members.filter(m => m.status === 'online').length} online

Miembros ({members.length})

{members.map((member) => (

{member.name[0]}

{member.name} ))}

{messages.map((msg) => (

{msg.sender}

{msg.text}

{msg.timestamp}

))}

setMessage(e.target.value)} placeholder="Escribe un mensaje..." className="flex-1" onKeyPress={(e) => e.key === 'Enter' && sendMessage()} />

) } [V0_FILE]typescriptreact:file="components/UserSettings.tsx" 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Camera, X } from 'lucide-react' interface UserSettingsProps { onClose: () => void } export function UserSettings({ onClose }: UserSettingsProps) { const [userProfile, setUserProfile] = useState({ name: 'Alex Thompson', title: 'Snowboard Instructor', bio: 'Instructor profesional con más de 8 años de experiencia. Especializado en freeride y backcountry.', level: 'expert', style: 'freeride', yearsExperience: '8' }) return ( Editar perfil {/* Foto de perfil */}

{/* Información básica */}

Nombre setUserProfile(prev => ({ ...prev, name: e.target.value }))} />

Título setUserProfile(prev => ({ ...prev, title: e.target.value }))} />

Biografía

setUserProfile(prev => ({ ...prev, bio: e.target.value }))}
                  rows={4}
                />
              </div>
            </div>

{/* Experiencia y estilo */}
            <div className="grid gap-4 md:grid-cols-2">
              <div className="grid gap-2">
                <Label>Nivel</Label>
                <Select
                  value={userProfile.level}
                  onValueChange={(value) => setUserProfile(prev => ({ ...prev, level: value }))}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona tu nivel" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="beginner">Principiante</SelectItem>
                    <SelectItem value="intermediate">Intermedio</SelectItem>
                    <SelectItem value="advanced">Avanzado</SelectItem>
                    <SelectItem value="expert">Experto</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="grid gap-2">
                <Label>Estilo preferido</Label>
                <Select
                  value={userProfile.style}
                  onValueChange={(value) => setUserProfile(prev => ({ ...prev, style: value }))}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Selecciona tu estilo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="freeride">Freeride</SelectItem>
                    <SelectItem value="freestyle">Freestyle</SelectItem>
                    <SelectItem value="all-mountain">All-Mountain</SelectItem>
                    <SelectItem value="alpine">Alpine</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Botones de acción */}
            <div className="flex justify-end space-x-2 pt-4">
              <Button variant="outline" onClick={onClose}>
                Cancelar
              </Button>
              <Button className="bg-blue-600 hover:bg-blue-700 text-white">
                Guardar cambios
              </Button>
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/WeatherForecast.tsx" isQuickEdit="true"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { TypeIcon as type, type LucideIcon } from "lucide-react"

interface ForecastDay {
  day: string
  icon: LucideIcon
  temp: string
}

interface WeatherForecastProps {
  location: string
  forecast?: ForecastDay[]
}

export function WeatherForecast({ location, forecast = [] }: WeatherForecastProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-black">Pronóstico del Tiempo</CardTitle>
      </CardHeader>
      <CardContent>
        {forecast.length > 0 ? (
          <div className="flex justify-between">
            {forecast.map((day, index) => (
              <motion.div
                key={day.day}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="text-center"
              >
                <p className="font-semibold text-black">{day.day}</p>
                <day.icon className="h-8 w-8 mx-auto my-2 text-black" />
                <p className="text-black">{day.temp}</p>
              </motion.div>
            ))}
          </div>
        ) : (
          <p className="text-center text-gray-500">No hay pronóstico disponible para {location} en este momento.</p>
        )}
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="utils/constants.ts" isQuickEdit="true"
export const winterSportsImages = [
  "https://images.unsplash.com/photo-1551698618-1dfe5d97d256",
  "https://images.unsplash.com/photo-1605540436563-5bca919ae766",
  "https://images.unsplash.com/photo-1565992441121-4367c2967103",
  "https://images.unsplash.com/photo-1612450622914-f0c1726daa80",
  "https://images.unsplash.com/photo-1613339027986-b94d85708995",
  "https://images.unsplash.com/photo-1610147323479-a7fb11ffd5dd",
  "https://images.unsplash.com/photo-1616038242814-a6eac7845d88",
  "https://images.unsplash.com/photo-1518081461904-9d8f136351c2",
]

export const locations = ["Cerro Catedral", "Valle Nevado", "Las Leñas", "Chapelco", "Cerro Castor", "Innsbruck"]

export const mockRiders = {
  "Cerro Catedral": [
    {
      id: 1,
      name: "Alex Thompson",
      age: 28,
      style: "Freeride",
      level: "Experto",
      avatar: "https://i.pravatar.cc/150?img=1",
      location: "Cerro Catedral",
      joinDate: "Miembro desde 2021",
      bio: "Apasionado del freeride y siempre en busca de nuevas aventuras en la nieve.",
      trips: [
        { location: "Whistler", date: "Enero 2023" },
        { location: "Chamonix", date: "Marzo 2022" },
        { location: "Cerro Castor", date: "Agosto 2021" },
      ],
    },
    {
      id: 2,
      name: "Maria González",
      age: 25,
      style: "Freestyle",
      level: "Avanzado",
      avatar: "https://i.pravatar.cc/150?img=5",
      location: "Cerro Catedral",
      joinDate: "Miembro desde 2022",
      bio: "Amante de los saltos y trucos. Siempre buscando compañeros para sesiones en el park.",
      trips: [
        { location: "Aspen", date: "Diciembre 2022" },
        { location: "Park City", date: "Febrero 2022" },
        { location: "Las Leñas", date: "Julio 2021" },
      ],
    },
    {
      id: 3,
      name: "Carlos Ramírez",
      age: 30,
      style: "All-Mountain",
      level: "Intermedio",
      avatar: "https://i.pravatar.cc/150?img=8",
      location: "Cerro Catedral",
      joinDate: "Miembro desde 2023",
      bio: "Disfruto explorando toda la montaña. Buscando amigos para compartir días de nieve.",
      trips: [
        { location: "Vail", date: "Enero 2023" },
        { location: "Cerro Catedral", date: "Agosto 2022" },
      ],
    },
  ],
  "Valle Nevado": [
    {
      id: 4,
      name: "Lucas Chen",
      age: 27,
      style: "All-Mountain",
      level: "Intermedio",
      avatar: "https://i.pravatar.cc/150?img=11",
      location: "Valle Nevado",
      joinDate: "Miembro desde 2023",
      bio: "Entusiasta del snowboard que disfruta explorando todo tipo de terreno.",
      trips: [
        { location: "Vail", date: "Enero 2023" },
        { location: "Cerro Catedral", date: "Agosto 2022" },
      ],
    },
    {
      id: 5,
      name: "Ana Silva",
      age: 29,
      style: "Freeride",
      level: "Avanzado",
      avatar: "https://i.pravatar.cc/150?img=16",
      location: "Valle Nevado",
      joinDate: "Miembro desde 2022",
      bio: "Amante de la nieve profunda y los descensos fuera de pista. Buscando compañeros de aventura.",
      trips: [
        { location: "Chamonix", date: "Febrero 2023" },
        { location: "Valle Nevado", date: "Agosto 2022" },
      ],
    },
  ],
  "Las Leñas": [
    {
      id: 6,
      name: "Sofia Ramírez",
      age: 26,
      style: "Freeride",
      level: "Experto",
      avatar: "https://i.pravatar.cc/150?img=20",
      location: "Las Leñas",
      joinDate: "Miembro desde 2020",
      bio: "Apasionada por el backcountry y los descensos empinados. Buscando compañeros para explorar fuera de pista.",
      trips: [
        { location: "Zermatt", date: "Febrero 2023" },
        { location: "Portillo", date: "Agosto 2022" },
        { location: "Cerro Catedral", date: "Julio 2021" },
      ],
    },
    {
      id: 7,
      name: "Javier López",
      age: 33,
      style: "All-Mountain",
      level: "Intermedio",
      avatar: "https://i.pravatar.cc/150?img=22",
      location: "Las Leñas",
      joinDate: "Miembro desde 2022",
      bio: "Disfruto de todos los aspectos del snowboard. Buscando compañeros para mejorar juntos.",
      trips: [
        { location: "Las Leñas", date: "Agosto 2022" },
        { location: "Chapelco", date: "Julio 2021" },
      ],
    },
  ],
  Chapelco: [
    {
      id: 8,
      name: "Valentina Gómez",
      age: 24,
      style: "Freestyle",
      level: "Avanzado",
      avatar: "https://i.pravatar.cc/150?img=25",
      location: "Chapelco",
      joinDate: "Miembro desde 2021",
      bio: "Amante de los rails y kickers. Buscando riders para sesiones en el park y filmar trucos.",
      trips: [
        { location: "Park City", date: "Enero 2023" },
        { location: "Chapelco", date: "Agosto 2022" },
      ],
    },
    {
      id: 9,
      name: "Mateo Rodríguez",
      age: 29,
      style: "Freeride",
      level: "Experto",
      avatar: "https://i.pravatar.cc/150?img=30",
      location: "Chapelco",
      joinDate: "Miembro desde 2020",
      bio: "Experto en rutas fuera de pista. Siempre en busca de nieve virgen y nuevos desafíos.",
      trips: [
        { location: "Hokkaido", date: "Enero 2023" },
        { location: "Valle Nevado", date: "Agosto 2022" },
        { location: "Las Leñas", date: "Julio 2021" },
      ],
    },
  ],
  "Cerro Castor": [
    {
      id: 10,
      name: "Laura Blanco",
      age: 27,
      style: "All-Mountain",
      level: "Avanzado",
      avatar: "https://i.pravatar.cc/150?img=32",
      location: "Cerro Castor",
      joinDate: "Miembro desde 2019",
      bio: "Versátil en todos los terrenos. Buscando compañeros para disfrutar de toda la montaña.",
      trips: [
        { location: "Breckenridge", date: "Diciembre 2022" },
        { location: "Chapelco", date: "Agosto 2022" },
        { location: "Cerro Catedral", date: "Julio 2021" },
      ],
    },
    {
      id: 11,
      name: "Martín Acosta",
      age: 32,
      style: "Freeride",
      level: "Experto",
      avatar: "https://i.pravatar.cc/150?img=35",
      location: "Cerro Castor",
      joinDate: "Miembro desde 2020",
      bio: "Amante de la adrenalina y los descensos empinados. Buscando riders para aventuras extremas.",
      trips: [
        { location: "Chamonix", date: "Febrero 2023" },
        { location: "Cerro Castor", date: "Agosto 2022" },
      ],
    },
  ],
  Innsbruck: [
    {
      id: 20,
      name: "Lukas Hofer",
      age: 29,
      style: "Freestyle",
      level: "Experto",
      avatar: "https://i.pravatar.cc/150?img=40",
      location: "Innsbruck",
      joinDate: "Miembro desde 2020",
      bio: "Amante del snowpark y siempre buscando nuevos trucos para dominar.",
      trips: [
        { location: "St. Anton", date: "Febrero 2023" },
        { location: "Mayrhofen", date: "Enero 2022" },
      ],
    },
    {
      id: 21,
      name: "Emma Schneider",
      age: 26,
      style: "All-Mountain",
      level: "Avanzado",
      avatar: "https://i.pravatar.cc/150?img=45",
      location: "Innsbruck",
      joinDate: "Miembro desde 2021",
      bio: "Exploradora de montañas y entusiasta de la fotografía de invierno.",
      trips: [
        { location: "Ischgl", date: "Marzo 2023" },
        { location: "Sölden", date: "Diciembre 2022" },
      ],
    },
  ],
}

export function getRandomProfileImage() {
  return winterSportsImages[Math.floor(Math.random() * winterSportsImages.length)]
}

export function isIphone() {
  return typeof window !== "undefined" && /iPhone/.test(navigator.userAgent)
}

export function getIphoneModel() {
  const width = typeof window !== "undefined" ? window.screen.width : 0
  const height = typeof window !== "undefined" ? window.screen.height : 0

if (width === 390 && height === 844) return "iPhone 12, 13, 14"
  if (width === 428 && height === 926) return "iPhone 12 Pro Max, 13 Pro Max, 14 Plus"
  if (width === 375 && height === 812) return "iPhone X, XS, 11 Pro"
  if (width === 414 && height === 896) return "iPhone XR, XS Max, 11"
  if (width === 320 && height === 568) return "iPhone 5"
  if (width === 375 && height === 667) return "iPhone 6, 6S, 7, 8"
  if (width === 414 && height === 736) return "iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus"
  return "Unknown iPhone model"
}

[V0_FILE]typescript:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

[V0_FILE]typescriptreact:file="components/Dashboard.tsx"
"use client"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserProfile } from "./UserProfile"
import { NearbyRiders } from "./NearbyRiders"
import { Settings } from "./Settings"

interface DashboardProps {
  userLocation: string
  userData: {
    name: string
    age: number
    avatar: string
    location: string
    joinDate: string
    style: string
    level: string
    bio: string
  }
  onLogout: () => void
}

export function Dashboard({ userLocation, userData, onLogout }: DashboardProps) {
  const [user, setUser] = useState(userData)
  const [showSettings, setShowSettings] = useState(false)

const handleUpdateUser = (updatedUser: Partial<typeof user>) => {
    setUser((prev) => ({ ...prev, ...updatedUser }))
  }

return (
    <div className="min-h-screen bg-black">
      <Tabs defaultValue="riders" className="w-full">
        <TabsList className="fixed bottom-0 left-0 right-0 h-16 grid grid-cols-2 bg-zinc-900/90 backdrop-blur-md border-t border-zinc-800 z-50">
          <TabsTrigger
            value="riders"
            className="data-[state=active]:bg-transparent data-[state=active]:text-[#CCFF00] text-zinc-400"
          >
            Riders
          </TabsTrigger>
          <TabsTrigger
            value="profile"
            className="data-[state=active]:bg-transparent data-[state=active]:text-[#CCFF00] text-zinc-400"
          >
            Perfil
          </TabsTrigger>
        </TabsList>
        <TabsContent value="riders" className="m-0 pb-16">
          <NearbyRiders userLocation={userLocation} />
        </TabsContent>
        <TabsContent value="profile" className="m-0 pb-16">
          <UserProfile
            user={user}
            onEditProfile={() => setShowSettings(true)}
            onUpdateUser={handleUpdateUser}
            onLogout={onLogout}
          />
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/EditProfile.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Camera, X } from "lucide-react"
import { getRandomProfileImage } from "../utils/constants"

interface EditProfileProps {
  user: {
    name: string
    age: number
    avatar: string
    location: string
    joinDate: string
    style: string
    level: string
    bio: string
    phone?: string
  }
  onClose: () => void
  onUpdateUser: (updatedUser: Partial<EditProfileProps["user"]>) => void
}

export function EditProfile({ user, onClose, onUpdateUser }: EditProfileProps) {
  const [userProfile, setUserProfile] = useState(user)

const handleSave = () => {
    onUpdateUser(userProfile)
    onClose()
  }

const handleChangeAvatar = () => {
    const newAvatar = getRandomProfileImage()
    setUserProfile((prev) => ({ ...prev, avatar: newAvatar }))
  }

return (
    <motion.div
      initial={{
        opacity: 0,
      }}
      animate={{
        opacity: 1,
      }}
      exit={{
        opacity: 0,
      }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.95, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        className="w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        <Card className="bg-zinc-900 border-zinc-800">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-xl text-white">Editar perfil</CardTitle>
            <Button variant="ghost" size="icon" onClick={onClose} className="text-zinc-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Foto de perfil */}
            <div className="flex justify-center">
              <div className="relative">
                <Avatar className="w-32 h-32">
                  <AvatarImage src={userProfile.avatar} />
                  <AvatarFallback>{userProfile.name[0]}</AvatarFallback>
                </Avatar>
                <Button
                  size="icon"
                  className="absolute bottom-0 right-0 rounded-full bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
                  onClick={handleChangeAvatar}
                >
                  <Camera className="h-4 w-4" />
                </Button>
              </div>
            </div>

{/* Información básica */}
            <div className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="name" className="text-white">
                  Nombre
                </Label>
                <Input
                  id="name"
                  value={userProfile.name}
                  onChange={(e) => setUserProfile((prev) => ({ ...prev, name: e.target.value }))}
                  className="bg-zinc-800 border-zinc-700 text-white"
                />
              </div>

<div className="grid gap-2">
                <Label htmlFor="age" className="text-white">
                  Edad
                </Label>
                <Input
                  id="age"
                  type="number"
                  value={userProfile.age}
                  onChange={(e) => setUserProfile((prev) => ({ ...prev, age: Number(e.target.value) }))}
                  className="bg-zinc-800 border-zinc-700 text-white"
                />
              </div>

<div className="grid gap-2">
                <Label htmlFor="phone" className="text-white">
                  Teléfono
                </Label>
                <Input
                  id="phone"
                  type="tel"
                  value={userProfile.phone || ""}
                  onChange={(e) => setUserProfile((prev) => ({ ...prev, phone: e.target.value }))}
                  className="bg-zinc-800 border-zinc-700 text-white"
                />
              </div>

<div className="grid gap-2">
                <Label htmlFor="bio" className="text-white">
                  Biografía
                </Label>
                <Textarea
                  id="bio"
                  value={userProfile.bio}
                  onChange={(e) => setUserProfile((prev) => ({ ...prev, bio: e.target.value }))}
                  rows={4}
                  className="bg-zinc-800 border-zinc-700 text-white"
                />
              </div>
            </div>

{/* Experiencia y estilo */}
            <div className="grid gap-4 md:grid-cols-2">
              <div className="grid gap-2">
                <Label className="text-white">Nivel</Label>
                <Select
                  value={userProfile.level}
                  onValueChange={(value) => setUserProfile((prev) => ({ ...prev, level: value }))}
                >
                  <SelectTrigger className="bg-zinc-800 border-zinc-700 text-white">
                    <SelectValue placeholder="Selecciona tu nivel" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="beginner">Principiante</SelectItem>
                    <SelectItem value="intermediate">Intermedio</SelectItem>
                    <SelectItem value="advanced">Avanzado</SelectItem>
                    <SelectItem value="expert">Experto</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="grid gap-2">
                <Label className="text-white">Estilo preferido</Label>
                <Select
                  value={userProfile.style}
                  onValueChange={(value) => setUserProfile((prev) => ({ ...prev, style: value }))}
                >
                  <SelectTrigger className="bg-zinc-800 border-zinc-700 text-white">
                    <SelectValue placeholder="Selecciona tu estilo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="freeride">Freeride</SelectItem>
                    <SelectItem value="freestyle">Freestyle</SelectItem>
                    <SelectItem value="all-mountain">All-Mountain</SelectItem>
                    <SelectItem value="alpine">Alpine</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

{/* Botones de acción */}
            <div className="flex justify-end space-x-2 pt-4">
              <Button variant="outline" onClick={onClose} className="bg-zinc-800 text-white hover:bg-zinc-700">
                Cancelar
              </Button>
              <Button className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90" onClick={handleSave}>
                Guardar cambios
              </Button>
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import { useState } from "react"
import { WelcomeScreens } from "../components/WelcomeScreens"
import { Onboarding } from "../components/Onboarding"
import { Dashboard } from "../components/Dashboard"
import { locations, getRandomProfileImage } from "../utils/constants"

type Step = "welcome" | "onboarding" | "main"

export default function Home() {
  const [step, setStep] = useState<Step>("welcome")
  const [userLocation, setUserLocation] = useState<string | null>(null)
  const [userData, setUserData] = useState({
    name: "",
    age: 0,
    avatar: "",
    location: "",
    joinDate: "",
    style: "",
    level: "",
    bio: "",
  })

const handleOnboardingComplete = (data: {
    name: string
    age: number
    style: string
    level: string
    location: string
  }) => {
    if (data.location && locations.includes(data.location) && data.name) {
      const newUserData = {
        ...data,
        avatar: getRandomProfileImage(),
        joinDate: new Date().toLocaleDateString(),
        bio: `${data.name} es un rider ${data.level} de ${data.style}.`,
      }
      setUserLocation(data.location)
      setUserData(newUserData)
      setStep("main")
    } else {
      console.error("Datos de usuario inválidos:", data)
      setStep("onboarding")
    }
  }

const handleLogout = () => {
    setStep("welcome")
    setUserLocation(null)
    setUserData({
      name: "",
      age: 0,
      avatar: "",
      location: "",
      joinDate: "",
      style: "",
      level: "",
      bio: "",
    })
  }

if (step === "welcome") {
    return <WelcomeScreens onComplete={() => setStep("onboarding")} />
  }

if (step === "onboarding") {
    return <Onboarding onComplete={handleOnboardingComplete} />
  }

if (userLocation && userData.name) {
    return <Dashboard userLocation={userLocation} userData={userData} onLogout={handleLogout} />
  }

return <Onboarding onComplete={handleOnboardingComplete} />
}

[V0_FILE]typescriptreact:file="components/SkiMap.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { X, MapPin } from "lucide-react"

interface SkiMapProps {
  onClose: () => void
  riders: any[]
}

export function SkiMap({ onClose, riders }: SkiMapProps) {
  const [selectedRider, setSelectedRider] = useState<any | null>(null)

{/* Marcadores de riders */}
          {riders.map((rider) => (
            <motion.div
              key={rider.id}
              className="absolute"
              style={{ top: `${Math.random() * 80 + 10}%`, left: `${Math.random() * 80 + 10}%` }}
              whileHover={{ scale: 1.1 }}
            >
              <Button variant="ghost" size="icon" className="rounded-full p-0" onClick={() => setSelectedRider(rider)}>
                <Avatar className="h-8 w-8 ring-2 ring-[#CCFF00]">
                  <AvatarImage src={rider.avatar} />
                  <AvatarFallback>{rider.name[0]}</AvatarFallback>
                </Avatar>
              </Button>
            </motion.div>
          ))}
        </div>
        {selectedRider && (
          <div className="p-4 border-t border-zinc-800">
            <div className="flex items-center space-x-3">
              <Avatar className="h-12 w-12">
                <AvatarImage src={selectedRider.avatar} />
                <AvatarFallback>{selectedRider.name[0]}</AvatarFallback>
              </Avatar>
              <div>
                <h3 className="text-white font-medium">{selectedRider.name}</h3>
                <p className="text-sm text-zinc-400 flex items-center">
                  <MapPin className="h-4 w-4 mr-1 text-[#CCFF00]" />
                  Pista Azul "El Cóndor"
                </p>
              </div>
            </div>
          </div>
        )}
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/SupportChat.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Send, X } from "lucide-react"

interface Message {
  id: number
  text: string
  sender: "user" | "support"
  timestamp: string
}

const supportResponses = [
  "Gracias por contactar al soporte de SnowConnect. ¿En qué puedo ayudarte hoy?",
  "Entiendo tu preocupación. Voy a revisar tu cuenta y te daré más información en un momento.",
  "¿Hay algo más en lo que pueda ayudarte?",
  "Si tienes más preguntas, no dudes en hacerlas. Estamos aquí para ayudarte.",
  "Gracias por tu paciencia. He revisado tu cuenta y todo parece estar en orden.",
  "¿Te gustaría que te explique cómo usar alguna función específica de la app?",
]

export function SupportChat({ onClose }: { onClose: () => void }) {
  const [messages, setMessages] = useState<Message[]>([])
  const [newMessage, setNewMessage] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages, messagesEndRef]) // Added messagesEndRef to dependencies

useEffect(() => {
    // Mensaje inicial del soporte
    setMessages([
      {
        id: Date.now(),
        text: supportResponses[0],
        sender: "support",
        timestamp: new Date().toLocaleTimeString(),
      },
    ])
  }, [])

const sendMessage = () => {
    if (newMessage.trim()) {
      const userMessage = {
        id: Date.now(),
        text: newMessage,
        sender: "user",
        timestamp: new Date().toLocaleTimeString(),
      }

setMessages((prev) => [...prev, userMessage])
      setNewMessage("")

// Simular respuesta del soporte
      setTimeout(() => {
        const supportMessage = {
          id: Date.now(),
          text: supportResponses[Math.floor(Math.random() * supportResponses.length)],
          sender: "support",
          timestamp: new Date().toLocaleTimeString(),
        }
        setMessages((prev) => [...prev, supportMessage])
      }, 1000)
    }
  }

[V0_FILE]typescriptreact:file="components/TermsAndConditions.tsx"
"use client"

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { X } from "lucide-react"

export function TermsAndConditions({ onClose }: { onClose: () => void }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
    >
      <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} className="w-full max-w-2xl">
        <Card className="bg-zinc-900 border-zinc-800">
          <CardHeader className="border-b border-zinc-800">
            <div className="flex items-center justify-between">
              <CardTitle className="text-xl text-white">Términos y Condiciones</CardTitle>
              <Button variant="ghost" size="icon" onClick={onClose} className="text-zinc-400 hover:text-white">
                <X className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <ScrollArea className="h-[60vh] p-6">
              <div className="space-y-4 text-zinc-300">
                <h2 className="text-lg font-semibold text-white">1. Aceptación de los Términos</h2>
                <p>
                  Al utilizar la aplicación SnowConnect, aceptas estos términos y condiciones en su totalidad. Si no
                  estás de acuerdo con estos términos, por favor, no uses la aplicación.
                </p>

<h2 className="text-lg font-semibold text-white">2. Uso de la Aplicación</h2>
                <p>
                  SnowConnect es una plataforma para conectar a entusiastas de los deportes de invierno. No debes
                  utilizar la aplicación para fines ilegales o no autorizados.
                </p>

<h2 className="text-lg font-semibold text-white">3. Privacidad</h2>
                <p>
                  Respetamos tu privacidad y protegemos tus datos personales. Consulta nuestra Política de Privacidad
                  para obtener más información sobre cómo recopilamos y utilizamos tus datos.
                </p>

<h2 className="text-lg font-semibold text-white">4. Contenido del Usuario</h2>
                <p>
                  Eres responsable de todo el contenido que publiques en SnowConnect. No debes publicar contenido
                  ofensivo, ilegal o que viole los derechos de otros usuarios.
                </p>

<h2 className="text-lg font-semibold text-white">5. Seguridad</h2>
                <p>
                  Aunque nos esforzamos por proporcionar una plataforma segura, no podemos garantizar la seguridad
                  absoluta. Utiliza tu mejor juicio al interactuar con otros usuarios y compartir información.
                </p>

<h2 className="text-lg font-semibold text-white">6. Modificaciones</h2>
                <p>
                  Nos reservamos el derecho de modificar estos términos en cualquier momento. Te notificaremos sobre
                  cambios significativos y tu uso continuado de la aplicación constituirá la aceptación de los nuevos
                  términos.
                </p>

<h2 className="text-lg font-semibold text-white">7. Contacto</h2>
                <p>
                  Si tienes preguntas sobre estos términos, por favor contáctanos a través de la sección de Soporte en
                  la aplicación.
                </p>
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/Notifications.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { X, UserPlus, MessageCircle } from "lucide-react"

interface Notification {
  id: number
  type: "friend_request" | "message"
  user: {
    name: string
    avatar: string
  }
  content: string
  timestamp: string
}

interface NotificationsProps {
  onClose: () => void
  setNotificationCount: (count: number) => void
  onAcceptFriendRequest: (user: any) => void
}

export function Notifications({ onClose, setNotificationCount, onAcceptFriendRequest }: NotificationsProps) {
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: 1,
      type: "friend_request",
      user: { name: "Ana García", avatar: "/placeholder.svg" },
      content: "Te ha enviado una solicitud de amistad",
      timestamp: "Hace 5 minutos",
    },
    {
      id: 2,
      type: "message",
      user: { name: "Carlos Rodríguez", avatar: "/placeholder.svg" },
      content: "¿Quieres unirte a nuestro grupo para esquiar mañana?",
      timestamp: "Hace 20 minutos",
    },
  ])

const handleNotificationAction = (id: number, action: "accept" | "decline") => {
    const notification = notifications.find((n) => n.id === id)
    if (notification && notification.type === "friend_request") {
      if (action === "accept") {
        onAcceptFriendRequest(notification.user)
      }
    }
    setNotifications((prev) => prev.filter((n) => n.id !== id))
    setNotificationCount(notifications.length - 1)
  }

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
    >
      <motion.div
        initial={{ scale: 0.95, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        className="w-full max-w-md bg-zinc-900 rounded-lg overflow-hidden"
      >
        <CardHeader className="border-b border-zinc-800">
          <div className="flex items-center justify-between">
            <CardTitle className="text-xl text-white">Notificaciones</CardTitle>
            <Button variant="ghost" size="icon" onClick={onClose} className="text-zinc-400 hover:text-[#CCFF00]">
              <X className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <ScrollArea className="h-[60vh]">
            {notifications.map((notification) => (
              <div key={notification.id} className="p-4 border-b border-zinc-800">
                <div className="flex items-center space-x-4">
                  <Avatar>
                    <AvatarImage src={notification.user.avatar} />
                    <AvatarFallback>{notification.user.name[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-white">{notification.user.name}</p>
                    <p className="text-xs text-zinc-400">{notification.content}</p>
                    <p className="text-xs text-zinc-500 mt-1">{notification.timestamp}</p>
                  </div>
                  {notification.type === "friend_request" && (
                    <div className="flex space-x-2">
                      <Button
                        size="sm"
                        className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
                        onClick={() => handleNotificationAction(notification.id, "accept")}
                      >
                        <UserPlus className="h-4 w-4 mr-1" />
                        Aceptar
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-zinc-700 text-zinc-400 hover:text-white"
                        onClick={() => handleNotificationAction(notification.id, "decline")}
                      >
                        Rechazar
                      </Button>
                    </div>
                  )}
                  {notification.type === "message" && (
                    <Button
                      size="sm"
                      className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
                      onClick={() => handleNotificationAction(notification.id, "accept")}
                    >
                      <MessageCircle className="h-4 w-4 mr-1" />
                      Responder
                    </Button>
                  )}
                </div>
              </div>
            ))}
          </ScrollArea>
        </CardContent>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/UserProfile.tsx" isQuickEdit="true"
"use client"

import { useState, useRef } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ChevronRight, LogOut, Camera, Phone } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { EditProfile } from "./EditProfile"
import { SupportChat } from "./SupportChat"
import { TermsAndConditions } from "./TermsAndConditions"

interface UserProfileProps {
  user: {
    name: string
    age: number
    avatar: string
    location: string
    joinDate: string
    style: string
    level: string
    bio: string
    phone?: string
  }
  onUpdateUser: (updatedUser: Partial<UserProfileProps["user"]>) => void
  onLogout: () => void
}

export function UserProfile({ user, onUpdateUser, onLogout }: UserProfileProps) {
  const [showEditProfile, setShowEditProfile] = useState(false)
  const [showSupportChat, setShowSupportChat] = useState(false)
  const [showTerms, setShowTerms] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)

const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onloadend = () => {
        onUpdateUser({ avatar: reader.result as string })
      }
      reader.readAsDataURL(file)
    }
  }

const handleAvatarClick = () => {
    fileInputRef.current?.click()
  }

return (
    <div className="min-h-screen bg-black p-4">
      <div className="max-w-md mx-auto space-y-6">
        <div className="text-center">
          <div className="relative inline-block" onClick={handleAvatarClick}>
            <Avatar className="w-24 h-24 ring-4 ring-[#CCFF00]/20 cursor-pointer hover:ring-[#CCFF00]/40 transition-all">
              <AvatarImage src={user.avatar} alt={user.name} />
              <AvatarFallback className="bg-zinc-800 text-[#CCFF00]">{user.name[0]}</AvatarFallback>
            </Avatar>
            <Button
              size="icon"
              className="absolute bottom-0 right-0 rounded-full bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
            >
              <Camera className="h-4 w-4" />
            </Button>
            <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
          </div>
          <h2 className="text-xl font-medium text-white mt-4">{user.name}</h2>
          <p className="text-zinc-400 text-sm">{user.location}</p>
          {user.phone && (
            <p className="text-zinc-400 text-sm mt-2 flex items-center justify-center">
              <Phone className="h-4 w-4 mr-2" />
              {user.phone}
            </p>
          )}
        </div>

<Card className="bg-zinc-900 border-zinc-800">
          <div className="p-4">
            <div className="flex justify-between items-center">
              <div>
                <h3 className="text-[#CCFF00] text-sm font-medium">Suscripción activa</h3>
                <p className="text-zinc-400 text-sm">hasta {new Date().toLocaleDateString()}</p>
              </div>
              <Button className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]">Editar</Button>
            </div>
          </div>
        </Card>

<div className="space-y-1">
          <Button
            variant="ghost"
            className="w-full justify-between text-zinc-400 hover:text-[#CCFF00] hover:bg-zinc-800/50"
            onClick={() => setShowEditProfile(true)}
          >
            <span>Editar perfil</span>
            <ChevronRight className="h-5 w-5 text-zinc-600" />
          </Button>
          <Button
            variant="ghost"
            className="w-full justify-between text-zinc-400 hover:text-[#CCFF00] hover:bg-zinc-800/50"
            onClick={() => setShowSupportChat(true)}
          >
            <span>Soporte</span>
            <ChevronRight className="h-5 w-5 text-zinc-600" />
          </Button>
          <Button
            variant="ghost"
            className="w-full justify-between text-zinc-400 hover:text-[#CCFF00] hover:bg-zinc-800/50"
            onClick={() => setShowTerms(true)}
          >
            <span>Acerca de la app</span>
            <ChevronRight className="h-5 w-5 text-zinc-600" />
          </Button>
        </div>

<Button
          variant="ghost"
          className="w-full text-red-500 hover:text-red-400 hover:bg-red-500/10"
          onClick={onLogout}
        >
          <LogOut className="mr-2 h-4 w-4" />
          Cerrar sesión
        </Button>
      </div>

{showEditProfile && (
        <EditProfile user={user} onClose={() => setShowEditProfile(false)} onUpdateUser={onUpdateUser} />
      )}

{showSupportChat && <SupportChat onClose={() => setShowSupportChat(false)} />}

{showTerms && <TermsAndConditions onClose={() => setShowTerms(false)} />}

<footer className="fixed bottom-0 left-0 right-0 text-center py-2 text-xs text-zinc-500">
        Made by Dani Bustamante 🏂
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/Settings.tsx"
import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { X, MessageSquare, ThumbsUp, HelpCircle } from "lucide-react"
import { locations } from "../utils/constants"

interface SettingsProps {
  onClose: () => void
  currentLocation: string
  onChangeLocation: (location: string) => void
}

export function Settings({ onClose, currentLocation, onChangeLocation }: SettingsProps) {
  const [location, setLocation] = useState(currentLocation)

const handleLocationChange = (newLocation: string) => {
    setLocation(newLocation)
    onChangeLocation(newLocation)
  }

[V0_FILE]typescriptreact:file="components/CreateGroup.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { X, Users, Check } from "lucide-react"

interface Rider {
  id: number
  name: string
  avatar: string
}

interface Group {
  id: number
  name: string
  members: Rider[]
}

interface CreateGroupProps {
  onClose: () => void
  riders: Rider[]
  onCreateGroup: (group: { name: string; members: Rider[] }) => void
  onEditGroup?: (group: Group) => void
  editingGroup?: Group
}

export function CreateGroup({ onClose, riders, onCreateGroup, onEditGroup, editingGroup }: CreateGroupProps) {
  const [groupName, setGroupName] = useState(editingGroup?.name || "")
  const [selectedRiders, setSelectedRiders] = useState<Rider[]>(editingGroup?.members || [])

useEffect(() => {
    if (editingGroup) {
      setGroupName(editingGroup.name)
      setSelectedRiders(editingGroup.members)
    }
  }, [editingGroup])

const handleSelectRider = (rider: Rider) => {
    setSelectedRiders((prev) => {
      if (!prev) return [rider]
      return prev.find((r) => r.id === rider.id) ? prev.filter((r) => r.id !== rider.id) : [...prev, rider]
    })
  }

const handleSaveGroup = () => {
    if (editingGroup) {
      onEditGroup?.({ ...editingGroup, name: groupName, members: selectedRiders })
    } else {
      onCreateGroup({ name: groupName, members: selectedRiders })
    }
    onClose()
  }

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
    >
      <motion.div
        initial={{ scale: 0.95, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        className="w-full max-w-md h-[90vh] sm:h-auto bg-zinc-900 rounded-lg overflow-hidden"
      >
        <CardHeader className="border-b border-zinc-800">
          <div className="flex items-center justify-between">
            <CardTitle className="text-xl text-white">
              {editingGroup ? "Editar grupo" : "Crear grupo de riders"}
            </CardTitle>
            <Button variant="ghost" size="icon" onClick={onClose} className="text-zinc-400 hover:text-white">
              <X className="h-4 w-4" />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-4 space-y-4">
          <div>
            <Input
              placeholder="Nombre del grupo"
              value={groupName}
              onChange={(e) => setGroupName(e.target.value)}
              className="bg-zinc-800 border-zinc-700 text-white"
            />
          </div>
          <div>
            <h3 className="text-sm font-medium text-white mb-2">Selecciona riders</h3>
            <ScrollArea className="h-48 sm:h-64">
              {riders.map((rider) => (
                <div
                  key={rider.id}
                  className="flex items-center justify-between p-2 hover:bg-zinc-800 cursor-pointer"
                  onClick={() => handleSelectRider(rider)}
                >
                  <div className="flex items-center space-x-3">
                    <Avatar>
                      <AvatarImage src={rider.avatar} />
                      <AvatarFallback>{rider.name[0]}</AvatarFallback>
                    </Avatar>
                    <span className="text-white">{rider.name}</span>
                  </div>
                  {selectedRiders.find((r) => r.id === rider.id) && <Check className="h-4 w-4 text-[#CCFF00]" />}
                </div>
              ))}
            </ScrollArea>
          </div>
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2 text-zinc-400">
              <Users className="h-4 w-4" />
              <span>{selectedRiders.length} seleccionados</span>
            </div>
            <Button
              onClick={handleSaveGroup}
              className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
              disabled={!groupName || selectedRiders.length === 0}
            >
              {editingGroup ? "Guardar cambios" : "Crear grupo"}
            </Button>
          </div>
        </CardContent>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/RiderProfile.tsx" isQuickEdit="true"
"use client"

import { motion } from "framer-motion"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { X, MessageCircle, MapPin, Calendar, Star, AlertTriangle } from "lucide-react"

interface RiderProfileProps {
  rider: {
    id: number
    name: string
    age: number
    style: string
    level: string
    avatar: string
    location: string
    joinDate: string
    bio: string
    trips?: Array<{ location: string; date: string }>
  }
  onClose: () => void
  onStartChat: () => void
}

export function RiderProfile({ rider, onClose, onStartChat }: RiderProfileProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.95, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        className="w-full max-w-lg max-h-[85vh] relative"
        onClick={(e) => e.stopPropagation()}
      >
        <Card className="bg-zinc-900/90 border-zinc-800 relative overflow-hidden">
          <ScrollArea className="max-h-[85vh]">
            <div className="relative p-4 sm:p-6">
              <Button
                variant="ghost"
                size="icon"
                className="absolute right-4 top-4 text-zinc-400 hover:bg-white hover:text-black transition-colors"
                onClick={onClose}
              >
                <X className="h-4 w-4" />
              </Button>

<div className="flex flex-col items-center text-center mb-6">
                <Avatar className="h-20 w-20 sm:h-24 sm:w-24 mb-4 ring-4 ring-[#CCFF00]/20">
                  <AvatarImage src={rider.avatar} alt={rider.name} />
                  <AvatarFallback>{rider.name[0]}</AvatarFallback>
                </Avatar>
                <h2 className="text-xl font-bold text-white mb-1">{rider.name}</h2>
                <div className="flex items-center gap-2 text-zinc-400 text-sm">
                  <MapPin className="h-4 w-4" />
                  <span>{rider.location}</span>
                </div>
              </div>

<div className="grid grid-cols-2 gap-3 mb-6">
                <div className="bg-black/20 rounded-lg p-3">
                  <div className="text-sm text-zinc-400">Estilo</div>
                  <div className="text-white font-medium">{rider.style}</div>
                </div>
                <div className="bg-black/20 rounded-lg p-3">
                  <div className="text-sm text-zinc-400">Nivel</div>
                  <div className="text-white font-medium">{rider.level}</div>
                </div>
              </div>

<div className="space-y-6">
                <div>
                  <h3 className="text-sm font-medium text-zinc-400 mb-2">Sobre mí</h3>
                  <p className="text-white text-sm leading-relaxed">{rider.bio}</p>
                </div>

{rider.trips && rider.trips.length > 0 && (
                  <div>
                    <h3 className="text-sm font-medium text-zinc-400 mb-2">Últimos viajes</h3>
                    <div className="grid gap-2">
                      {rider.trips.map((trip, index) => (
                        <div key={index} className="flex items-center justify-between bg-black/20 rounded-lg p-3">
                          <span className="text-white text-sm">{trip.location}</span>
                          <div className="flex items-center text-zinc-400 text-sm">
                            <Calendar className="h-4 w-4 mr-1" />
                            {trip.date}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

<div>
                  <h3 className="text-sm font-medium text-zinc-400 mb-2">Reseñas</h3>
                  <div className="grid gap-2">
                    {[
                      { name: "Ana", rating: 5, comment: "Excelente compañero, muy puntual y divertido." },
                      { name: "Carlos", rating: 4, comment: "Buen nivel, nos divertimos mucho en las pistas." },
                    ].map((review, index) => (
                      <div key={index} className="bg-black/20 rounded-lg p-3">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-white text-sm font-medium">{review.name}</span>
                          <div className="flex items-center">
                            {Array.from({ length: review.rating }).map((_, i) => (
                              <Star key={i} className="h-3 w-3 text-[#CCFF00]" />
                            ))}
                          </div>
                        </div>
                        <p className="text-xs text-zinc-400">{review.comment}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

<div className="flex space-x-2 mt-6">
                <Button className="flex-1 bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90" onClick={onStartChat}>
                  <MessageCircle className="h-4 w-4 mr-2" />
                  Iniciar chat
                </Button>
                <Button className="flex-1 bg-red-500 text-white hover:bg-red-600">
                  <AlertTriangle className="h-4 w-4 mr-2" />
                  S.O.S
                </Button>
              </div>
            </div>
          </ScrollArea>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Import React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "SnowConnect",
  description: "Conecta con otros riders en la nieve",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/MouseMoveEffect.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"

export function MouseMoveEffect() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY })
    }

window.addEventListener("mousemove", handleMouseMove)

return () => {
      window.removeEventListener("mousemove", handleMouseMove)
    }
  }, [])

return (
    <motion.div
      className="pointer-events-none fixed inset-0 z-30 transition-opacity"
      animate={{
        background: `radial-gradient(600px at ${mousePosition.x}px ${mousePosition.y}px, rgba(204, 255, 0, 0.15), transparent 80%)`,
      }}
    />
  )
}

[V0_FILE]javascript:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "spin-slow": {
          from: { transform: "rotate(0deg)" },
          to: { transform: "rotate(360deg)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "spin-slow": "spin-slow 20s linear infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/Chat.tsx" isQuickEdit="true"
"use client"

interface Message {
  id: number
  text: string
  sender: string
  timestamp: string
}

interface ChatProps {
  onClose: () => void
  otherUser?: { name: string; avatar: string }
  group?: { id: number; name: string; members: { id: number; name: string; avatar: string }[] }
  onEditGroup?: (groupId: number) => void
}

const generateResponse = (message: string, otherUser: any): string => {
  const lowerMessage = message.toLowerCase()

if (lowerMessage.includes("ride") || lowerMessage.includes("esquiar")) {
    return `¡Claro! Me encantaría hacer un ride. ¿Te parece encontrarnos en la base de ${otherUser.location} a las 10:00 AM?`
  }

if (lowerMessage.includes("hora") || lowerMessage.includes("cuando")) {
    return "¿Te parece bien a las 10:00 AM? Es un buen momento para empezar, la nieve estará perfecta."
  }

if (lowerMessage.includes("donde") || lowerMessage.includes("lugar")) {
    return `Nos podemos encontrar en la base principal de ${otherUser.location}, junto al café. Es fácil de ubicar.`
  }

if (lowerMessage.includes("nivel") || lowerMessage.includes("experiencia")) {
    return `Soy un rider de nivel ${otherUser.level}, principalmente me gusta el estilo ${otherUser.style}. ¿Qué tal tú?`
  }

if (lowerMessage.includes("ok") || lowerMessage.includes("perfecto") || lowerMessage.includes("genial")) {
    return "¡Excelente! Nos vemos entonces. ¡Va a estar increíble! 🏂"
  }

return "¡Hola! ¿Te gustaría compartir un ride hoy? La nieve está perfecta para practicar."
}

export function Chat({ onClose, otherUser, group, onEditGroup }: ChatProps) {
  const [messages, setMessages] = useState<Message[]>([])
  const [newMessage, setNewMessage] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages, scrollToBottom]) // Added scrollToBottom to dependencies

const sendMessage = (text: string) => {
    if (text.trim()) {
      const userMessage = {
        id: Date.now(),
        text: text,
        sender: "Tú",
        timestamp: new Date().toLocaleTimeString(),
      }

setMessages((prev) => [...prev, userMessage])
      setNewMessage("")

// Simular respuesta
      if (!group) {
        setTimeout(() => {
          const response = generateResponse(text, otherUser)
          setMessages((prev) => [
            ...prev,
            {
              id: Date.now(),
              text: response,
              sender: otherUser?.name || "Usuario",
              timestamp: new Date().toLocaleTimeString(),
            },
          ])
        }, 1000)
      } else {
        // Simular respuestas de otros miembros del grupo
        setTimeout(() => {
          const randomMember = group.members[Math.floor(Math.random() * group.members.length)]
          setMessages((prev) => [
            ...prev,
            {
              id: Date.now(),
              text: `¡Genial idea! Estoy de acuerdo con ${userMessage.sender}.`,
              sender: randomMember.name,
              timestamp: new Date().toLocaleTimeString(),
            },
          ])
        }, 1500)
      }
    }
  }

const quickMessages = [
    "Voy a la pista azul",
    "Nos encontramos en la base en 10 min",
    "¿Quieres hacer un descanso para tomar café?",
    "Estoy en la cafetería",
  ]

return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        className="w-full max-w-lg h-[90vh] sm:h-[600px]"
      >
        <Card className="h-full flex flex-col bg-zinc-900 border-zinc-800">
          <CardHeader className="border-b border-zinc-800">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                {group ? (
                  <div className="flex -space-x-2">
                    {group.members.slice(0, 3).map((member, index) => (
                      <Avatar key={index} className="border-2 border-zinc-900">
                        <AvatarImage src={member.avatar} />
                        <AvatarFallback>{member.name[0]}</AvatarFallback>
                      </Avatar>
                    ))}
                    {group.members.length > 3 && (
                      <div className="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center text-xs text-white">
                        +{group.members.length - 3}
                      </div>
                    )}
                  </div>
                ) : (
                  <Avatar>
                    <AvatarImage src={otherUser?.avatar} />
                    <AvatarFallback>{otherUser?.name?.[0] || "U"}</AvatarFallback>
                  </Avatar>
                )}
                <div>
                  <h2 className="text-white font-medium">{group ? group.name : otherUser?.name || "Usuario"}</h2>
                  <p className="text-sm text-zinc-400">{group ? `${group.members.length} miembros` : "En línea"}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                {group && onEditGroup && (
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => onEditGroup(group.id)}
                    className="text-zinc-400 hover:text-[#CCFF00] transition-colors duration-200"
                  >
                    <UserPlus className="h-4 w-4" />
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={onClose}
                  className="text-zinc-400 hover:bg-white hover:text-black transition-colors"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent className="flex-1 overflow-y-auto p-2 sm:p-4 space-y-4">
            {messages.map((message) => (
              <motion.div
                key={message.id}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                className={`flex ${message.sender === "Tú" ? "justify-end" : "justify-start"}`}
              >
                <div
                  className={`max-w-[70%] rounded-lg p-3 ${
                    message.sender === "Tú" ? "bg-[#CCFF00] text-black" : "bg-zinc-800 text-white"
                  }`}
                >
                  {group && message.sender !== "Tú" && <p className="text-xs font-medium mb-1">{message.sender}</p>}
                  <p>{message.text}</p>
                  <p className={`text-xs mt-1 ${message.sender === "Tú" ? "text-black/60" : "text-zinc-400"}`}>
                    {message.timestamp}
                  </p>
                </div>
              </motion.div>
            ))}
            <div ref={messagesEndRef} />
          </CardContent>
          <div className="p-4 border-t border-zinc-800 space-y-4">
            <div className="flex flex-wrap gap-2">
              {quickMessages.map((msg, index) => (
                <Button
                  key={index}
                  variant="outline"
                  size="sm"
                  className="bg-zinc-800 text-white border-zinc-700 hover:bg-[#CCFF00] hover:text-black"
                  onClick={() => sendMessage(msg)}
                >
                  {msg}
                </Button>
              ))}
            </div>
            <div className="flex gap-2">
              <Input
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                placeholder="Escribe un mensaje..."
                className="flex-1 bg-zinc-800 border-zinc-700 text-white"
                onKeyPress={(e) => e.key === "Enter" && sendMessage(newMessage)}
              />
              <Button onClick={() => sendMessage(newMessage)} className="bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90">
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </Card>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/MeetingPointMap.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { X, MapPin } from "lucide-react"

interface MeetingPointMapProps {
  onClose: () => void
  meetingPoint: string
}

export function MeetingPointMap({ onClose, meetingPoint }: MeetingPointMapProps) {
  const [userLocation] = useState({ x: 50, y: 80 })
  const [destinationLocation] = useState({ x: 70, y: 30 })

{/* User location */}
            <div
              className="absolute w-4 h-4 bg-blue-500 rounded-full"
              style={{ left: `${userLocation.x}%`, top: `${userLocation.y}%`, transform: "translate(-50%, -50%)" }}
            />

{/* Destination */}
            <div
              className="absolute"
              style={{
                left: `${destinationLocation.x}%`,
                top: `${destinationLocation.y}%`,
                transform: "translate(-50%, -50%)",
              }}
            >
              <MapPin className="h-8 w-8 text-[#CCFF00]" />
            </div>
          </div>

<div className="absolute bottom-4 left-4 bg-zinc-900 p-2 rounded-lg">
            <p className="text-white text-sm">Distancia estimada: 500m</p>
            <p className="text-white text-sm">Tiempo estimado: 5 min</p>
          </div>
        </div>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/ChatList.tsx"
import { useState } from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"

interface ChatListProps {
  chats: Array<{
    id: string
    name: string
    avatar: string
    lastMessage: string
  }>
  onChatSelect: (chatId: string) => void
}

export function ChatList({ chats, onChatSelect }: ChatListProps) {
  const [selectedChat, setSelectedChat] = useState<string | null>(null)

const handleChatSelect = (chatId: string) => {
    setSelectedChat(chatId)
    onChatSelect(chatId)
  }

if (chats.length === 0) return null

return (
    <div className="bg-zinc-900/50 rounded-lg border border-zinc-800/50 overflow-hidden backdrop-blur-sm">
      <ScrollArea className="h-auto max-h-[300px]">
        <div className="p-1">
          {chats.map((chat) => (
            <motion.div
              key={chat.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2 }}
            >
              <Button
                variant="ghost"
                className={`w-full justify-start text-left p-3 rounded-lg transition-all duration-200 
                  ${selectedChat === chat.id ? "bg-[#CCFF00]/10 hover:bg-[#CCFF00]/20" : "hover:bg-zinc-800/50"}`}
                onClick={() => handleChatSelect(chat.id)}
              >
                <div className="flex items-center w-full gap-3">
                  <div className="relative">
                    <Avatar className="h-12 w-12 border-2 border-transparent transition-colors duration-200 group-hover:border-[#CCFF00]/20">
                      <AvatarImage src={chat.avatar} alt={chat.name} />
                      <AvatarFallback>{chat.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="absolute bottom-0 right-0 w-3 h-3 bg-[#CCFF00] rounded-full border-2 border-zinc-900" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-sm font-medium text-white truncate">{chat.name}</p>
                      <span className="text-xs text-zinc-500">12:30</span>
                    </div>
                    <p className="text-xs text-zinc-400 truncate mt-1">{chat.lastMessage}</p>
                  </div>
                </div>
              </Button>
            </motion.div>
          ))}
        </div>
      </ScrollArea>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/WelcomeScreens.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Snowflake, Users, Mountain, ArrowRight } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { MouseMoveEffect } from "./MouseMoveEffect"

const screens = [
  {
    id: 1,
    title: "Bienvenido a SnowConnect",
    description: "Encuentra compañeros para tus aventuras en la nieve",
    color: "bg-zinc-900",
    icon: Snowflake,
    backgroundImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-OTf4uIWm9zL9hnDWOOhpR3LgL7MLTv.png",
  },
  {
    id: 2,
    title: "Conecta con riders",
    description: "Conoce riders de tu nivel y estilo en tu centro de esquí favorito",
    color: "bg-zinc-900",
    icon: Users,
    backgroundImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-hTAn4Sdjwnt9T6jWgKtcUibjIDumXE.png",
  },
  {
    id: 3,
    title: "Comparte la montaña",
    description: "Organiza salidas y mejora tu técnica con otros riders",
    color: "bg-zinc-900",
    icon: Mountain,
    backgroundImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-oPTojQEjKo5kIBeLdduL60WMPBJ0oA.png",
  },
]

interface WelcomeScreensProps {
  onComplete: () => void
}

export function WelcomeScreens({ onComplete }: WelcomeScreensProps) {
  const [currentScreen, setCurrentScreen] = useState(0)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

const handleNext = () => {
    if (currentScreen === screens.length - 1) {
      onComplete()
    } else {
      setCurrentScreen((prev) => prev + 1)
    }
  }

const handleLogin = (e: React.FormEvent) => {
    e.preventDefault()
    if (email && password) {
      onComplete()
    }
  }

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        handleNext()
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [handleNext])

return (
    <div className="relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-black via-zinc-900 to-zinc-800">
      <MouseMoveEffect />
      <AnimatePresence mode="wait">
        <motion.div
          key={currentScreen}
          initial={{ opacity: 0, x: 100 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -100 }}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
          className="min-h-screen w-full"
        >
          <div className={`relative min-h-screen w-full px-6 py-12 flex flex-col`}>
            {/* Background Image */}
            {screens[currentScreen].backgroundImage && (
              <div className="absolute inset-0 z-0">
                <div
                  className="absolute inset-0 bg-cover bg-center"
                  style={{
                    backgroundImage: `url(${screens[currentScreen].backgroundImage})`,
                  }}
                />
                <div
                  className={`absolute inset-0 ${
                    currentScreen === 2
                      ? "bg-gradient-to-b from-black/90 via-black/50 to-black/90"
                      : "bg-gradient-to-b from-black/80 via-black/50 to-black/80"
                  } backdrop-blur-sm`}
                />
              </div>
            )}

<div className="relative z-10 flex-1 flex flex-col items-center justify-center space-y-8 sm:space-y-16">
              <div className="w-64 h-64 relative">
                <div className="absolute inset-0 flex items-center justify-center">
                  {React.createElement(screens[currentScreen].icon, {
                    className: "w-24 h-24 text-[#CCFF00]",
                  })}
                </div>
              </div>
              <div className="text-center space-y-6">
                <motion.h1
                  className="text-4xl font-bold text-white"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                >
                  {screens[currentScreen].title}
                </motion.h1>
                <motion.p
                  className="text-lg text-zinc-400 max-w-xl mx-auto"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                >
                  {screens[currentScreen].description}
                </motion.p>
              </div>
            </div>

{currentScreen === screens.length - 1 ? (
              <motion.div
                className="relative z-10 w-full max-w-sm mx-auto mt-8 sm:mt-12"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
              >
                <div className="bg-black/50 backdrop-blur-md rounded-xl p-6 space-y-6">
                  <form onSubmit={handleLogin} className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="email" className="text-white">
                        Email
                      </Label>
                      <Input
                        id="email"
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className="bg-zinc-800/50 border-zinc-700 text-white"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="password" className="text-white">
                        Contraseña
                      </Label>
                      <Input
                        id="password"
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="bg-zinc-800/50 border-zinc-700 text-white"
                        required
                      />
                    </div>
                    <Button
                      type="submit"
                      className="w-full bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90 h-12 text-lg mt-4"
                      disabled={!email || !password}
                    >
                      Iniciar sesión
                    </Button>
                  </form>
                  <div className="text-center">
                    <Button variant="link" className="text-zinc-400 hover:text-[#CCFF00]">
                      ¿No tienes cuenta? Regístrate
                    </Button>
                  </div>
                </div>
              </motion.div>
            ) : (
              <div className="relative z-10 space-y-8 w-full max-w-sm mx-auto">
                <div className="flex justify-center space-x-2">
                  {screens.map((_, index) => (
                    <div
                      key={index}
                      className={`h-2 rounded-full transition-all ${
                        index === currentScreen ? "w-8 bg-[#CCFF00]" : "w-2 bg-zinc-700"
                      }`}
                    />
                  ))}
                </div>

<Button
                  onClick={handleNext}
                  className="w-full bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90 h-12 text-lg"
                >
                  Siguiente
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </div>
            )}
          </div>
          <footer className="fixed bottom-0 left-0 right-0 text-center py-2 text-xs text-zinc-500">
            Made by Dani Bustamante 🏂
          </footer>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/AgeSelector.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"

interface AgeSelectorProps {
  value: number
  onChange: (age: number) => void
  onNext: () => void
  onBack: () => void
}

export function AgeSelector({ value, onChange, onNext, onBack }: AgeSelectorProps) {
  const [selectedAge, setSelectedAge] = useState(value)
  const containerRef = useRef<HTMLDivElement>(null)
  const startY = useRef<number | null>(null)
  const ages = Array.from({ length: 80 }, (_, i) => i + 1) // 1-80 años
  const itemHeight = 40 // altura de cada item

useEffect(() => {
    if (containerRef.current) {
      const container = containerRef.current
      const scrollPosition = (selectedAge - 1) * itemHeight
      container.scrollTop = scrollPosition - container.clientHeight / 2 + itemHeight / 2
    }
  }, [selectedAge])

const handleScroll = () => {
    if (containerRef.current) {
      const container = containerRef.current
      const scrollPosition = container.scrollTop
      const index = Math.round((scrollPosition + container.clientHeight / 2 - itemHeight / 2) / itemHeight)
      const newAge = ages[index]
      if (newAge !== selectedAge) {
        setSelectedAge(newAge)
        onChange(newAge)
      }
    }
  }

const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault()
    if (containerRef.current) {
      containerRef.current.scrollTop += e.deltaY
    }
  }

const handleTouchStart = (e: React.TouchEvent) => {
    startY.current = e.touches[0].clientY
  }

const handleTouchMove = (e: React.TouchEvent) => {
    if (startY.current === null) return
    const deltaY = startY.current - e.touches[0].clientY
    if (containerRef.current) {
      containerRef.current.scrollTop += deltaY
    }
    startY.current = e.touches[0].clientY
  }

const handleTouchEnd = () => {
    startY.current = null
  }

return (
    <div
      className="flex flex-col items-center justify-center h-full touch-pan-y"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div
        className="relative h-[200px] w-full max-w-[200px] overflow-hidden cursor-grab active:cursor-grabbing"
        ref={containerRef}
        onScroll={handleScroll}
        onWheel={handleWheel}
      >
        <div className="absolute inset-0 pointer-events-none z-10">
          <div className="h-[80px] w-full border-t border-b border-[#CCFF00] top-1/2 -translate-y-1/2 absolute" />
        </div>
        <div className="absolute inset-0 overflow-y-scroll">
          <div style={{ height: `${itemHeight * (ages.length + 4)}px` }}>
            {ages.map((age) => (
              <motion.div
                key={age}
                className={`h-[${itemHeight}px] flex items-center justify-center ${
                  age === selectedAge ? "text-[#CCFF00] text-3xl font-bold" : "text-zinc-400 text-xl"
                }`}
                animate={{
                  scale: age === selectedAge ? 1.2 : 1,
                  opacity: age === selectedAge ? 1 : 0.7,
                }}
                transition={{ duration: 0.2 }}
              >
                {age}
              </motion.div>
            ))}
          </div>
        </div>
      </div>

<div className="flex justify-between gap-4 mt-8 w-full max-w-[200px]">
        <Button
          variant="outline"
          className="flex-1 bg-zinc-900 border-zinc-800 text-white hover:bg-zinc-800 hover:text-white"
          onClick={onBack}
        >
          Atrás
        </Button>
        <Button className="flex-1 bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90" onClick={onNext}>
          Siguiente
        </Button>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/Onboarding.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { User, Snowflake } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { locations } from "../utils/constants"
import { AgeSelector } from "./AgeSelector"
import { MouseMoveEffect } from "./MouseMoveEffect"

const styles = [
  { id: "freeride", name: "Freeride", icon: "🏔️", description: "Aventuras fuera de pista" },
  { id: "freestyle", name: "Freestyle", icon: "🎪", description: "Trucos y saltos" },
  { id: "all-mountain", name: "All-Mountain", icon: "🗻", description: "Versatilidad total" },
  { id: "alpine", name: "Alpine", icon: "⛷️", description: "Velocidad y técnica" },
]

const experiences = [
  { id: "beginner", name: "Principiante", icon: "🌱", description: "Primera vez o pocas salidas" },
  { id: "intermediate", name: "Intermedio", icon: "🌿", description: "1-3 temporadas" },
  { id: "advanced", name: "Avanzado", icon: "🌲", description: "3+ temporadas" },
  { id: "expert", name: "Experto", icon: "🎯", description: "Nivel competitivo" },
]

interface OnboardingData {
  name: string
  age: number
  style: string
  experience: string
  location: string
}

export function Onboarding({ onComplete }: { onComplete: (data: OnboardingData) => void }) {
  const [step, setStep] = useState(0)
  const [userData, setUserData] = useState<OnboardingData>({
    name: "",
    age: 25,
    style: "",
    experience: "",
    location: "",
  })

const updateUserData = (key: keyof OnboardingData, value: string | number) => {
    setUserData((prev) => ({ ...prev, [key]: value }))
  }

const nextStep = () => {
    if (step < 4) {
      setStep((prev) => prev + 1)
    } else {
      onComplete(userData)
    }
  }

const prevStep = () => {
    setStep((prev) => prev - 1)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      nextStep()
    }
  }

const renderStep = () => {
    switch (step) {
      case 0:
        return (
          <div className="space-y-6">
            <div className="space-y-4">
              <Label htmlFor="name" className="text-white">
                ¿Cómo te llamas?
              </Label>
              <div className="relative">
                <User className="absolute left-3 top-3 h-5 w-5 text-zinc-400" />
                <Input
                  id="name"
                  value={userData.name}
                  onChange={(e) => updateUserData("name", e.target.value)}
                  className="pl-10 bg-zinc-900 border-zinc-800 text-white"
                  placeholder="Tu nombre"
                />
              </div>
            </div>
          </div>
        )
      case 1:
        return (
          <AgeSelector
            value={userData.age}
            onChange={(age) => updateUserData("age", age)}
            onNext={nextStep}
            onBack={prevStep}
          />
        )
      case 2:
        return (
          <div className="grid grid-cols-2 gap-4">
            {styles.map((style) => (
              <motion.div key={style.id} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
                <Card
                  className={`cursor-pointer transition-colors h-full ${
                    userData.style === style.id
                      ? "bg-[#CCFF00]/10 border-[#CCFF00]"
                      : "bg-zinc-900 border-zinc-800 hover:border-zinc-700"
                  }`}
                  onClick={() => updateUserData("style", style.id)}
                >
                  <CardContent className="p-4 sm:p-6 text-center space-y-2 flex flex-col justify-between h-full">
                    <div className="text-3xl sm:text-4xl">{style.icon}</div>
                    <div>
                      <h3 className="font-medium text-white">{style.name}</h3>
                      <p className="text-xs sm:text-sm text-zinc-400">{style.description}</p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        )
      case 3:
        return (
          <div className="grid grid-cols-2 gap-4">
            {experiences.map((exp) => (
              <motion.div key={exp.id} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="h-full">
                <Card
                  className={`cursor-pointer transition-colors h-full ${
                    userData.experience === exp.id
                      ? "bg-[#CCFF00]/10 border-[#CCFF00]"
                      : "bg-zinc-900 border-zinc-800 hover:border-zinc-700"
                  }`}
                  onClick={() => updateUserData("experience", exp.id)}
                >
                  <CardContent className="p-4 sm:p-6 text-center space-y-2 flex flex-col justify-between h-full">
                    <div className="text-3xl sm:text-4xl">{exp.icon}</div>
                    <div>
                      <h3 className="font-medium text-white">{exp.name}</h3>
                      <p className="text-xs sm:text-sm text-zinc-400">{exp.description}</p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        )
      case 4:
        return (
          <div className="space-y-6">
            <div className="space-y-4">
              <Label className="text-white">Selecciona tu ubicación</Label>
              <Select value={userData.location} onValueChange={(value) => updateUserData("location", value)}>
                <SelectTrigger className="bg-zinc-900 border-zinc-800 text-white">
                  <SelectValue placeholder="Elige un centro de esquí" />
                </SelectTrigger>
                <SelectContent
                  className="bg-zinc-900 border-zinc-800 max-h-[300px] overflow-y-auto z-50"
                  position="popper"
                  sideOffset={5}
                >
                  {locations.map((location) => (
                    <SelectItem key={location} value={location} className="text-white">
                      {location}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div
      onKeyDown={handleKeyDown}
      tabIndex={0}
      className="min-h-screen bg-gradient-to-br from-black via-zinc-900 to-zinc-800 p-4 sm:p-6 relative overflow-hidden"
    >
      <MouseMoveEffect />
      <div className="max-w-sm sm:max-w-md mx-auto space-y-6 sm:space-y-8 relative z-10">
        {/* Progress */}
        <div>
          <div className="h-1 w-full bg-zinc-800 rounded-full overflow-hidden">
            <div
              className="h-full bg-[#CCFF00] rounded-full transition-all"
              style={{ width: `${((step + 1) / 5) * 100}%` }}
            />
          </div>
          <div className="mt-2 text-sm text-zinc-400">{step + 1}/5</div>
        </div>

{/* Header */}
        <div className="flex items-center gap-2">
          <Snowflake className="h-6 w-6 text-[#CCFF00]" />
          <div>
            <h2 className="text-2xl font-bold text-white">
              {step === 0 && "Bienvenido rider"}
              {step === 1 && "Tu edad"}
              {step === 2 && "Tu estilo"}
              {step === 3 && "Tu nivel"}
              {step === 4 && "Tu ubicación"}
            </h2>
            <p className="text-zinc-400">
              {step === 0 && "Cuéntanos sobre ti"}
              {step === 1 && "¿Cuántos años tienes?"}
              {step === 2 && "¿Cómo te gusta deslizarte?"}
              {step === 3 && "¿Cuál es tu experiencia?"}
              {step === 4 && "¿Dónde te encuentras?"}
            </p>
          </div>
        </div>

{/* Content */}
        <motion.div
          key={step}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3 }}
        >
          {renderStep()}
        </motion.div>

{/* Navigation */}
        {step !== 1 && (
          <div className="flex justify-between gap-4">
            {step > 0 ? (
              <Button
                variant="outline"
                onClick={prevStep}
                className="flex-1 bg-zinc-900 border-zinc-800 text-white hover:bg-zinc-800 hover:text-white"
              >
                Atrás
              </Button>
            ) : (
              <div className="flex-1" />
            )}
            <Button
              onClick={nextStep}
              className="flex-1 bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90"
              disabled={
                (step === 0 && !userData.name) ||
                (step === 2 && !userData.style) ||
                (step === 3 && !userData.experience) ||
                (step === 4 && !userData.location)
              }
            >
              {step === 4 ? "Comenzar" : "Siguiente"}
            </Button>
          </div>
        )}
      </div>
      <footer className="fixed bottom-0 left-0 right-0 text-center py-2 text-xs text-zinc-500">
        Made by Dani Bustamante 🏂
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/NearbyRiders.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
import { Badge } from "@/components/ui/badge"
import {
  MapPin,
  MessageCircle,
  Settings,
  Users,
  Map,
  Coffee,
  AlertTriangle,
  Bell,
  UserPlus,
  Snowflake,
} from "lucide-react"
import { Chat } from "./Chat"
import { RiderProfile } from "./RiderProfile"
import { SkiMap } from "./SkiMap"
import { Notifications } from "./Notifications"
import { mockRiders } from "../utils/constants"
import { CreateGroup } from "./CreateGroup"
import { MouseMoveEffect } from "./MouseMoveEffect"
import { Settings as SettingsComponent } from "./Settings" // Import the Settings component
import { MeetingPointMap } from "./MeetingPointMap" // Added import for MeetingPointMap
import { ChatList } from "./ChatList"
import { motion } from "framer-motion"

interface NearbyRidersProps {
  userLocation: string
  setUserLocation: (newLocation: string) => void // Added setUserLocation function
}

interface Group {
  id: number
  name: string
  members: any[]
}

export function NearbyRiders({ userLocation, setUserLocation }: NearbyRidersProps) {
  const [showChat, setShowChat] = useState(false)
  const [showProfile, setShowProfile] = useState(false)
  const [showMap, setShowMap] = useState(false)
  const [selectedRider, setSelectedRider] = useState<any | null>(null)
  const [showNotifications, setShowNotifications] = useState(false)
  const [showCreateGroup, setShowCreateGroup] = useState(false)
  const [showSettings, setShowSettings] = useState(false) // Added state for settings
  const [notificationCount, setNotificationCount] = useState(2)
  const [groups, setGroups] = useState<Group[]>([])
  const [friends, setFriends] = useState<any[]>([])
  const [editingGroup, setEditingGroup] = useState<Group | null>(null)
  const [selectedGroup, setSelectedGroup] = useState<Group | null>(null)
  const [selectedMeetingPoint, setSelectedMeetingPoint] = useState<string | null>(null) // Added state for selected meeting point
  const [ongoingChats, setOngoingChats] = useState<
    Array<{
      id: string
      name: string
      avatar: string
      lastMessage: string
    }>
  >([])
  const riders = mockRiders[userLocation] ?? []
  const onlineRiders = riders.slice(0, 8)

const handleRiderClick = (rider: any) => {
    setSelectedRider(rider)
    setShowProfile(true)
  }

const handleStartChat = (rider?: any) => {
    if (rider) {
      const existingChat = ongoingChats.find((chat) => chat.id === rider.id.toString())
      if (!existingChat) {
        setOngoingChats((prev) => [
          ...prev,
          {
            id: rider.id.toString(),
            name: rider.name,
            avatar: rider.avatar,
            lastMessage: "Iniciaste una conversación",
          },
        ])
      }
      setSelectedRider(rider)
    }
    setShowChat(true)
  }

const handleCreateGroup = (group: { name: string; members: any[] }) => {
    const newGroup = { id: Date.now(), ...group }
    setGroups([...groups, newGroup])
  }

const handleEditGroup = (group: Group) => {
    setEditingGroup(group)
    setShowCreateGroup(true)
  }

const handleSaveEditedGroup = (editedGroup: Group) => {
    setGroups(groups.map((g) => (g.id === editedGroup.id ? editedGroup : g)))
    setEditingGroup(null)
  }

const handleAcceptFriendRequest = (rider: any) => {
    setFriends([...friends, rider])
    setNotificationCount(notificationCount - 1)
  }

const handleChangeLocation = (newLocation: string) => {
    // Here you would typically update the user's location in your backend
    // For now, we'll just update the local state
    setUserLocation(newLocation)
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-black via-zinc-900 to-zinc-800 relative overflow-hidden">
      <MouseMoveEffect />
      {/* Enhanced Header */}
      <div className="fixed top-0 left-0 right-0 z-40 bg-gradient-to-b from-black/95 via-black/90 to-transparent backdrop-blur-md">
        <div className="container mx-auto max-w-7xl">
          {/* Logo Section */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex items-center justify-center py-4"
          >
            <div className="relative">
              <Snowflake className="w-8 h-8 text-[#CCFF00]" />
              <motion.div
                initial={{ scale: 1.5, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ delay: 0.2, duration: 0.5 }}
                className="absolute inset-0 flex items-center justify-center"
              >
                <Snowflake className="w-5 h-5 text-white" />
              </motion.div>
            </div>
            <motion.h1
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="text-xl font-bold text-[#CCFF00] ml-2"
            >
              SnowConnect
            </motion.h1>
          </motion.div>

{/* Location and Actions Bar */}
          <div className="px-4 py-3 flex items-center justify-between border-t border-zinc-800/50">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="flex items-center space-x-3"
            >
              <div className="relative">
                <MapPin className="h-5 w-5 text-[#CCFF00]" />
                <motion.div
                  animate={{
                    scale: [1, 1.2, 1],
                    opacity: [1, 0.8, 1],
                  }}
                  transition={{
                    duration: 2,
                    repeat: Number.POSITIVE_INFINITY,
                    repeatType: "reverse",
                  }}
                  className="absolute -inset-1 bg-[#CCFF00]/20 rounded-full"
                />
              </div>
              <div className="flex flex-col">
                <span className="text-xs text-zinc-400">Tu ubicación</span>
                <span className="text-sm font-medium text-white">{userLocation}</span>
              </div>
            </motion.div>
            <div className="flex items-center space-x-2">
              <Button
                variant="ghost"
                size="icon"
                className="text-zinc-400 hover:bg-[#CCFF00] hover:text-black transition-colors duration-200 relative"
                onClick={() => setShowNotifications(true)}
              >
                <Bell className="h-5 w-5" />
                {notificationCount > 0 && (
                  <motion.span
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    className="absolute top-0 right-0 -mt-1 -mr-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center"
                  >
                    {notificationCount}
                  </motion.span>
                )}
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="text-zinc-400 hover:bg-[#CCFF00] hover:text-black transition-colors duration-200"
                onClick={() => setShowSettings(true)}
              >
                <Settings className="h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Enhanced Hero Section */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 1 }}
        className="relative w-full h-48 sm:h-72 md:h-96 overflow-hidden flex items-center justify-center"
      >
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage:
              'url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-OTf4uIWm9zL9hnDWOOhpR3LgL7MLTv.png")',
            filter: "brightness(0.7) contrast(1.1)",
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/90" />
        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ delay: 1 }}
          className="relative text-center px-4"
        >
          <p className="text-sm font-medium text-[#CCFF00] mb-2">DESTACADO</p>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Descubre nuevas rutas</h2>
        </motion.div>
      </motion.div>

{/* Spacer with subtle gradient */}
      <div className="h-16 bg-gradient-to-b from-black to-transparent" />

{/* Main content */}
      <div className="pt-0 px-4 sm:px-6 space-y-6 sm:space-y-8 pb-32">
        {/* Connected riders */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center space-x-2">
              <Users className="h-5 w-5 text-[#CCFF00]" />
              <h2 className="text-white font-medium text-lg">Conectados ahora</h2>
            </div>
            <Badge variant="outline" className="bg-[#CCFF00]/10 text-[#CCFF00] border-0">
              {onlineRiders.length} online
            </Badge>
          </div>

<ScrollArea className="w-full">
            <div className="flex space-x-4 pb-4">
              {onlineRiders.map((rider) => (
                <button
                  key={rider.id}
                  className="flex flex-col items-center space-y-2"
                  onClick={() => handleRiderClick(rider)}
                >
                  <div className="relative">
                    <Avatar className="h-12 w-12 sm:h-16 sm:w-16 ring-2 ring-[#CCFF00]/20">
                      <AvatarImage src={rider.avatar} />
                      <AvatarFallback>{rider.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className={`absolute bottom-0 right-0 h-3 w-3 rounded-full bg-[#CCFF00] ring-2 ring-black`} />
                  </div>
                  <span className="text-sm text-zinc-400">{rider.name.split(" ")[0]}</span>
                </button>
              ))}
            </div>
            <ScrollBar orientation="horizontal" className="hidden" />
          </ScrollArea>
        </section>
        {/* Groups */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center space-x-2">
              <Users className="h-5 w-5 text-[#CCFF00]" />
              <h2 className="text-white font-medium text-lg">Grupos</h2>
            </div>
            <Button
              variant="outline"
              size="sm"
              className="text-black bg-[#CCFF00] border-[#CCFF00] hover:bg-[#CCFF00]/90 hover:text-black"
              onClick={() => setShowCreateGroup(true)}
            >
              <UserPlus className="h-4 w-4 mr-2" />
              Crear grupo
            </Button>
          </div>

<ScrollArea className="w-full">
            <div className="flex space-x-4 pb-4">
              {groups.map((group) => (
                <button
                  key={group.id}
                  className="flex flex-col items-center space-y-2"
                  onClick={() => handleStartChat(group)}
                >
                  <Avatar className="h-16 w-16 ring-2 ring-[#CCFF00]/20">
                    <AvatarFallback>{group.name[0]}</AvatarFallback>
                  </Avatar>
                  <span className="text-sm text-zinc-400">{group.name}</span>
                </button>
              ))}
            </div>
            <ScrollBar orientation="horizontal" className="hidden" />
          </ScrollArea>
        </section>
        {/* Chats iniciados */}
        {ongoingChats.length > 0 && (
          <section>
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center space-x-2">
                <MessageCircle className="h-5 w-5 text-[#CCFF00]" />
                <h2 className="text-white font-medium text-lg">Chats iniciados</h2>
              </div>
            </div>
            <ChatList
              chats={ongoingChats}
              onChatSelect={(chatId) => {
                const rider = riders.find((r) => r.id.toString() === chatId)
                if (rider) {
                  handleStartChat(rider)
                }
              }}
            />
          </section>
        )}
        {/* Friends */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center space-x-2">
              <Users className="h-5 w-5 text-[#CCFF00]" />
              <h2 className="text-white font-medium text-lg">Amigos</h2>
            </div>
          </div>

<ScrollArea className="w-full">
            <div className="flex space-x-4 pb-4">
              {friends.map((friend) => (
                <button
                  key={friend.id}
                  className="flex flex-col items-center space-y-2"
                  onClick={() => handleStartChat()}
                >
                  <Avatar className="h-16 w-16 ring-2 ring-[#CCFF00]/20">
                    <AvatarImage src={friend.avatar} />
                    <AvatarFallback>{friend.name[0]}</AvatarFallback>
                  </Avatar>
                  <span className="text-sm text-zinc-400">{friend.name.split(" ")[0]}</span>
                </button>
              ))}
            </div>
            <ScrollBar orientation="horizontal" className="hidden" />
          </ScrollArea>
        </section>
        {/* Ski Map Button */}
        <section>
          <Button
            className="w-full bg-[#CCFF00] text-black hover:bg-[#CCFF00]/90 h-12 text-lg flex items-center justify-center space-x-2"
            onClick={() => setShowMap(true)}
          >
            <Map className="h-5 w-5" />
            <span>Ver mapa del centro de ski</span>
          </Button>
        </section>
        {/* Meeting Points */}
        <section className="px-4 sm:px-0">
          <h2 className="text-white font-medium text-lg mb-4">Puntos de encuentro</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {["Cafetería Central", "Rental de Equipos", "Base de Telesilla Principal", "Escuela de Ski"].map(
              (point, index) => (
                <Button
                  key={index}
                  variant="outline"
                  className="bg-zinc-900 border-zinc-800 text-white hover:bg-zinc-800 hover:text-[#CCFF00] p-4 flex items-center space-x-3 h-auto transition-colors duration-200"
                  onClick={() => setSelectedMeetingPoint(point)}
                >
                  <Coffee className="h-6 w-6 text-[#CCFF00] flex-shrink-0" />
                  <span className="text-sm text-left">{point}</span>
                </Button>
              ),
            )}
          </div>
        </section>
        {/* Slope Status */}
        <section>
          <h2 className="text-white font-medium text-lg mb-4">Estado de las pistas</h2>
          <div className="space-y-3">
            {[
              "Pista Negra: Abierta",
              "Pista Roja: Cerrada por mantenimiento",
              "Pista Azul: Abierta",
              "Pista Verde: Abierta",
            ].map((status, index) => (
              <div key={index} className="flex items-center space-x-2">
                <div className={`h-3 w-3 rounded-full ${status.includes("Abierta") ? "bg-green-500" : "bg-red-500"}`} />
                <span className="text-zinc-300 text-sm">{status}</span>
              </div>
            ))}
          </div>
        </section>
        {/* Nearby riders grid */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-white font-medium text-lg">Riders cercanos</h2>
            <span className="text-sm text-zinc-400">{riders.length} disponibles</span>
          </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {riders.map((rider) => (
              <Card key={rider.id} className="bg-zinc-900 border-zinc-800 hover:bg-zinc-800/50 transition-all">
                <div className="p-4 space-y-4">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center space-x-3 cursor-pointer" onClick={() => handleRiderClick(rider)}>
                      <Avatar className="h-12 w-12">
                        <AvatarImage src={rider.avatar} />
                        <AvatarFallback>{rider.name[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <h3 className="text-white font-medium">{rider.name}</h3>
                        <p className="text-sm text-zinc-400">{rider.style}</p>
                      </div>
                    </div>
                    <Badge variant="outline" className="bg-transparent border-zinc-700 text-zinc-400">
                      12 km
                    </Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button
                      variant="secondary"
                      size="sm"
                      className="flex-1 bg-white/10 text-white hover:bg-[#CCFF00] hover:text-black transition-colors"
                      onClick={() => handleStartChat(rider)}
                    >
                      <MessageCircle className="h-4 w-4 mr-2" />
                      Mensaje
                    </Button>
                    <Button
                      variant="secondary"
                      size="sm"
                      className="flex-1 bg-white/10 text-white hover:bg-[#CCFF00] hover:text-black transition-colors"
                    >
                      <AlertTriangle className="h-4 w-4 mr-2" />
                      S.O.S
                    </Button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </section>
      </div>

{showProfile && selectedRider && (
        <RiderProfile rider={selectedRider} onClose={() => setShowProfile(false)} onStartChat={handleStartChat} />
      )}

{showChat && (
        <Chat
          onClose={() => setShowChat(false)}
          otherUser={selectedRider}
          group={selectedGroup}
          onEditGroup={handleEditGroup}
        />
      )}

{showMap && <SkiMap onClose={() => setShowMap(false)} riders={onlineRiders} />}

{showNotifications && (
        <Notifications
          onClose={() => setShowNotifications(false)}
          setNotificationCount={setNotificationCount}
          onAcceptFriendRequest={handleAcceptFriendRequest}
        />
      )}

{showCreateGroup && (
        <CreateGroup
          onClose={() => {
            setShowCreateGroup(false)
            setEditingGroup(null)
          }}
          riders={[...riders, ...friends]}
          onCreateGroup={handleCreateGroup}
          onEditGroup={handleSaveEditedGroup}
          editingGroup={editingGroup}
        />
      )}
      {showSettings && (
        <SettingsComponent
          onClose={() => setShowSettings(false)}
          currentLocation={userLocation}
          onChangeLocation={handleChangeLocation}
        />
      )}
      {selectedMeetingPoint && (
        <MeetingPointMap onClose={() => setSelectedMeetingPoint(null)} meetingPoint={selectedMeetingPoint} />
      )}
      {/* Enhanced Footer */}
      <footer className="fixed bottom-0 left-0 right-0 text-center py-2 text-xs text-zinc-500 bg-black/90 backdrop-blur-md">
        Made by Dani Bustamante 🏂
      </footer>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dani194

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dani194

More Templates Like This